 <template>
  <div id="user_particulars">
    <div v-if="headIos" style="z-index:9; width: 100%; height: 20px;background: white;position: fixed;top: 0;"></div>
    <div>
      <k-header headTitle="消费明细" goBack="true" rightTitle="按月查看" @rightClick="jumps">
      </k-header>
    </div>
    <div class="particulars_list" :class="headIos?'side-fixd-ios':'side-fixed'">
      <div v-show="afcode">
        <group>
          <div class="parts_list graps">
            <cell :title= 'thismonth'>
              <span solt="value" style="padding-right:.2rem;">消费总额：{{ tots }}</span>
            </cell>
          </div>
        </group>
      </div>
      <div class="my_list">
        <ul>
          <li v-for="consums in consum" :key="consums.orderType">
            <div class="me-left">
               {{ consums.orderPayType | filtershop(consums.orderPayType,consums.orderType) }}
              <div class="partic_list_time">
                <span>{{ consums.day }}日</span>
                <span>{{ consums.time }}</span>
              </div>
            </div>
            <div class="me_right">
              <!-- <span :class="filtershp(consums.orderPayType,consums.orderType)">-{{ consums.orderTotal }}</span> -->
              <span :class="consums.orderPayType | filtershp(consums.orderType)">{{ consums.orderTotal | filterspa(consums.orderPayType,consums.orderType) }}</span>
            </div>
          </li>
        </ul>
      </div>
      <div v-show="no_show" class="noMassage">
        <img src="../../assets/img/no-massage.png" alt="">
        <p>{{ msglink }}</p>
      </div>
    </div>
    
  </div>
</template>

<style scoped>
  ul,li {list-style:none;}
  .particulars_list {
    padding: 45px 0 0 0;
  }
  .side-fixd-ios {
    padding: 65px 0 0 0;
  }
  .parts_list {
    font-size: 1.4rem;
  }
  .owe {
    color: #F84D21;
  }
  .surplus {
    color: #56C401;
  }
  .graps {
    background-color: #f5f5f5;
  }
  .graps span {
    color: #999999;
  }
  .weui-cell {
    padding: 16px !important;
  }
  .my_list li {
    overflow: hidden;
    background-color: #fff;
    padding: 10px 0;
    height: 40px;
    font-size: 1.4rem;
    color: #212121; 
    border-bottom: 1px solid #e5e5e5; 
  }
  .partic_list_time {
    font-size: 1.2rem;
    color: #808080;
  }
  .my_list li>div {
    
  }
  .me-left {
    float: left;
    width: 50%;
    height: 100%;
    padding: 0 0 0 1.5rem;
  }
  .me_right {
    float: right;
    /* width: 50%; */
    height: 40px;
    line-height: 40px;
    text-align: right;
    padding: 0 1.5rem 0 0;
  }
  .par_subtra {
    color: #F84D21;
  }
  .par_adds {
    color: #56C401;
  }

  .noMassage{
    height: 100%;
  }
  .noMassage img{
    display: block;
    width:4.5rem;
    height:14rem;
    padding-top: 36%;
    margin: auto;
  }
  .noMassage p{
    font-size: 14px;
    color: #808080;
    letter-spacing: 0;
    text-align: center;
    padding-top: 8%;
  }
</style>

<script>
import kHeader from '../common/head'
import { Group, Cell } from 'vux'
import util from '../../libs/util'
export default {
  name: 'particulars',
  data() {
    return {
      consum: '',
      thismonth: '',
      first: '',
      headIos: false,
      tots: '',
      afcode: false,
      no_show: false,
      msglink: '',
      parsu: false
    }
  },
  components: {
    kHeader,
    Group,
    Cell
  },
  methods: {
    getdata: function() {
      var dates = {};
      if(this.$route.query.centerfirst){
        var date = new Date;
        var month = ''// (date.getMonth() + 1).toString();
        if((date.getMonth() + 1)<= 9){
          month = 0 + (date.getMonth() + 1).toString();
        }else {
          month = (date.getMonth() + 1).toString();
        }
        let year = date.getFullYear().toString();
        let dat = date.getDate();
        console.log(dat);
        dates.date = year+month+dat;
        if(this.$route.query.individual == '1' && this.$route.query.companycer =='1'){
          this.daio(dates);
        }        
      } else {
        dates.date = this.$route.query.moths;
        this.daio(dates);
      }
    },
    daio(k) {
      let that = this;
      var url = '/lblsapp-h5/v2/personCenter/consumptionDetail.json';
      util.ajax.post(url, k).then(function(stats) {
          console.log(stats);
          that.consum = stats.data.res.data;
          that.thismonth = stats.data.res.msg;;
          console.log(stats.data.code);
          if(stats.data.code == '1'){
            that.afcode = false;
            that.no_show = true;
            that.msglink = stats.data.res.msg;
          } else if (stats.data.code == '0'){
            that.afcode = true;
            that.no_show = false;
            that.tots = that.threes(stats.data.res.data);
          };
      }).catch(function(error) {
          console.log(error);
      })
    },
    threes(k) {
      var totals = 0;
      for(let r = 0;r<k.length;r++){
        console.log(123);
        var s = (k[r].orderTotal)*100;
        var h = k[r].orderPayType;
        var p = k[r].orderType;
        if(h == 'BALANCE'){ //余额消费
          totals = totals - s;
        } else if(h == 'ALIPAY'||h =='WXPAY') { //支付宝跟微信
          if(p == "RECHARGE"){ // 充值
          }else { // 消费
            totals = totals - s;
          }
        } else if(h == 'REFUND'){ // 余额退款
          totals = totals + s;
        }else if(h == 'ONLINEREFUNF'){ // 在线退款
          totals = totals + s;
        }     
      }
      return Math.abs((totals/100).toFixed(2));

    },
    jumps() {
      this.$router.push('/userConsumption');
    }
  },
  filters: {
    filtershop(value, k, g){
      if (k == 'BALANCE'){
        return '余额支付';
      } else if(k == 'REFUND'){
        return '余额退款';
      } else if(k == 'ALIPAY'){
        if(g == "RECHARGE"){
          return '支付宝充值';
        }else {
          return '支付宝支付';
        }
      } else if(k == 'WXPAY'){
        if(g == "RECHARGE"){
          return '微信充值';
        }else {
          return '微信支付';
        }
      } else if(k == 'ONLINEREFUNF'){
        return '在线退款';
      }
    },
    filterspa(value,k,g){
      if(k == 'BALANCE'){
        return '-'+ value;
      } else if(k == 'ALIPAY'||k =='WXPAY') {
        if(g == "RECHARGE"){
          return '+' + value
        }else {
          return '-' + value
        }
      } else if(k == 'REFUND'){
        return '+' + value;
      }else if(k == 'ONLINEREFUNF'){
        return '+' + value;
      }
    },
    filtershp(value,k) {
      if(value == 'BALANCE'){
        return 'par_subtra';
      } else if(value == 'ALIPAY'||value =='WXPAY') {
        if(k == "RECHARGE"){
          return 'par_adds' 
        }else {
          return 'par_subtra'
        }
      } else if(value == 'REFUND'||value == 'ONLINEREFUNF'){
        return 'par_adds'
      }
    }
  },
  created() {
    if (window.navigator.userAgent.indexOf('LBLSIOS') > -1) {
      this.headIos = true;
    }
    this.getdata();
    // this.first = this.$route.query.centerfirst;
  }
}
</script>


